import React, { Component } from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import { Form, Input, Button } from 'antd'
import styles from './index.less'

const FormItem = Form.Item

class MySearch extends Component {
  static propTypes = {
    submit: PropTypes.func
  };

  static defaultProps = {
    submit: () => {}
  }

  renderFormItem = ({key, label, initialValue = ''}) => {
    const {form} = this.props
    const {getFieldDecorator} = form
    return (
      <FormItem key={key} label={label}>
        {getFieldDecorator(key, {
          initialValue
        })(
          <Input placeholder={`请输入${label}`} />,
        )}
      </FormItem>
    )
  }

  submit = (e) => {
    e.preventDefault()
    const {form, submit} = this.props
    form.validateFields((err, values) => {
      submit(values)
    })
  }

  render() {
    const {data = []} = this.props
    return (
      <Form onSubmit={this.submit} layout='inline' className={styles.container}>
        {data.map(item => this.renderFormItem(item))}
        <div className={classnames(styles.item, 'middle-flex')}>
          <Button htmlType='submit' type='primary' style={{marginRight: 10}}>查询</Button>
          <Button type='danger'>清空</Button>
        </div>
      </Form>
    )
  }
}

export default Form.create()(MySearch)
